<html>
<head>
    <title>菜单管理</title>
    <link rel="stylesheet" href="../../../assets/bundle.element.css">
    <link rel="stylesheet" href="../../../style.css">
    <style>
        body{
            background: #F2F2F2;
        }


        .main-head{
            background: #fff;
            padding-left: 10px;
            padding-top: 10px;
            margin-bottom: 0px;
            border: solid 1px #fff;
        }

        .chart-outer{
            height: 200px;
        }




    </style>
</head>
<body>
<div class="page" id="page-monitor">

    <div class="page-title">分项管理</div>
    <div class="page-main">
        <el-row>
            <el-col :span='4'>
                <dev-tree ref="devTree" v-on:click-node="onTreeNode"  :tabsign="'p'"  ></dev-tree>
            </el-col>
            <el-col :span="20">
                <div class="main-head">
                    <el-form :inline="true">
                        <el-form-item label="">
                            <el-input v-model="sectionName"  placeholder="分项名称" style="width: 220px"></el-input>
                        </el-form-item>

                        <el-form-item>
                            <el-button type="primary" @click="searchOption" >查询</el-button>
                            <el-tooltip effect="dark" content="请点击左边树中项目" v-model="tooltip" placement="right">
                            <el-button type="success" @click="addClick" >新增</el-button>
                            </el-tooltip>
                        </el-form-item>
                    </el-form>
                </div>
                <el-table   border stripe style="width: 100%" :data="tabData">
                    <el-table-column prop="section_name" label="分项名称" align="center">
                    </el-table-column>
                    <el-table-column prop="section_unit" label="单位" align="center">
                    </el-table-column>
                    <el-table-column prop="section_seqno" label="序号"  align="center">
                    </el-table-column>
                    <el-table-column prop="electric" label="电统计"  align="center">
                        <template slot-scope="scope">
                            <div v-if="scope.row.electric == '1'">
                                是
                            </div>
                            <div v-else-if="scope.row.electric == '0'">
                                否
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="water" label="水统计" align="center">
                        <template slot-scope="scope">
                            <div v-if="scope.row.water == '1'">
                                是
                            </div>
                            <div v-else-if="scope.row.water == '0'">
                                否
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="gas" label="燃气统计" align="center">
                        <template slot-scope="scope">
                            <div v-if="scope.row.gas == '1'">
                                是
                            </div>
                            <div v-else-if="scope.row.gas == '0'">
                                否
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="steam" label="蒸汽统计" align="center">
                        <template slot-scope="scope">
                            <div v-if="scope.row.steam == '1'">
                                是
                            </div>
                            <div v-else-if="scope.row.steam == '0'">
                                否
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="oil" label="油统计" align="center">
                        <template slot-scope="scope">
                            <div v-if="scope.row.oil == '1'">
                                是
                            </div>
                            <div v-else-if="scope.row.oil == '0'">
                                否
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="coal" label="煤统计" align="center">
                        <template slot-scope="scope">
                            <div v-if="scope.row.coal == '1'">
                                是
                            </div>
                            <div v-else-if="scope.row.coal == '0'">
                                否
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="heat" label="热统计" align="center">
                        <template slot-scope="scope">
                            <div v-if="scope.row.heat == '1'">
                                是
                            </div>
                            <div v-else-if="scope.row.heat == '0'">
                                否
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="reportFlag" label="是否上报" align="center">
                        <template slot-scope="scope">
                            <div v-if="scope.row.reportFlag == '1'">
                                是
                            </div>
                            <div v-else-if="scope.row.reportFlag == '0'">
                                否
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="f_EnergyItemCode" label="分类分项代码" align="center">

                    </el-table-column>
                    <el-table-column prop="section_type" label="类型" align="center">
                    </el-table-column>
                    <el-table-column label="操作"  align="center" width="200">
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row)" round size="small"  icon="el-icon-edit"></el-button>
                            <el-button  round icon="el-icon-delete"  size="small" @click="delClick(scope.row)"></el-button>
                        </template>
                    </el-table-column>
                </el-table>

            </el-col>
        </el-row>
        <el-dialog :title="editMod?'编辑':'新增'"
                   :visible.sync="editFormVisible"
                   center
                   width="35%"
        >
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="分项名称" prop="section_name" :rules="[
                             {required:true,message:'分项名称不能为空!',trigger:'blur'}
                ]" >
                    <el-input v-model="form.section_name" ></el-input>
                </el-form-item>

                <el-form-item label="单位" prop="section_unit" :rules="[
                             {required:true,message:'单位不能为空!',trigger:'blur'}
                ]" >
                    <el-input v-model="form.section_unit" ></el-input>
                </el-form-item>
                <el-form-item label="序号" prop="section_seqno" :rules="[
                             {required:true,message:'序号不能为空!',trigger:'blur'}
                ]" >
                    <el-input  v-model="form.section_seqno" ></el-input>
                </el-form-item>

                <el-form-item label="电统计" prop="electric"  :rules="[
                             {required:true,message:'不能为空!',trigger:'blur'}
                            ]">
                    <el-select v-model="form.electric" placeholder="--请选择--" >
                        <el-option label="是" value="1"></el-option>
                        <el-option label="否" value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="水统计" prop="water"  :rules="[
                             {required:true,message:'不能为空!',trigger:'blur'}
                            ]">
                    <el-select v-model="form.water" placeholder="--请选择--" >
                        <el-option label="是" value="1"></el-option>
                        <el-option label="否" value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="蒸汽统计" prop="steam"  :rules="[
                             {required:true,message:'不能为空!',trigger:'blur'}
                            ]">
                    <el-select v-model="form.steam" placeholder="--请选择--" >
                        <el-option label="是" value="1"></el-option>
                        <el-option label="否" value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="燃气统计" prop="gas"  :rules="[
                             {required:true,message:'不能为空!',trigger:'blur'}
                            ]">
                    <el-select v-model="form.gas" placeholder="--请选择--" >
                        <el-option label="是" value="1"></el-option>
                        <el-option label="否" value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="油统计" prop="oil"  :rules="[
                             {required:true,message:'不能为空!',trigger:'blur'}
                            ]">
                    <el-select v-model="form.oil" placeholder="--请选择--" >
                        <el-option label="是" value="1"></el-option>
                        <el-option label="否" value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="煤统计" prop="coal"  :rules="[
                             {required:true,message:'不能为空!',trigger:'blur'}
                            ]">
                    <el-select v-model="form.coal" placeholder="--请选择--" >
                        <el-option label="是" value="1"></el-option>
                        <el-option label="否" value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="热统计" prop="heat"  :rules="[
                             {required:true,message:'不能为空!',trigger:'blur'}
                            ]">
                    <el-select v-model="form.heat" placeholder="--请选择--" >
                        <el-option label="是" value="1"></el-option>
                        <el-option label="否" value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否上报" prop="reportFlag"  :rules="[
                             {required:true,message:'不能为空!',trigger:'blur'}
                            ]">
                    <el-select v-model="form.reportFlag" placeholder="--请选择--" >
                        <el-option label="是" value="1"></el-option>
                        <el-option label="否" value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="分类分项代码" prop="f_EnergyItemCode"  >
                    <el-input v-model="form.f_EnergyItemCode" ></el-input>
                </el-form-item>
                <el-form-item label="能耗类型" prop="section_type"  >
                    <el-input v-model="form.section_type" ></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelClick('form')" style="background-color: #7eb8b0  ">取消</el-button>
                <el-button  @click="submitClick('form')" style="margin-left: 40px;background-color: #f9b317;">保存</el-button>
            </div>
        </el-dialog>
    </div>
</div>


<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>

<script>

    var vuePage=new Vue({
        el:'#page-monitor',
        data:{
            editFormVisible:false,
            tabData:[],
            form:{},
            sectionName:'',
            editMod:false,
            tooltip:false,
            proNo:'',
        },
        methods:{
            onTreeNode:function(data){
                if (data.id.indexOf('P')== -1){
                    this.proNo = '';
                    this.tabData = [];
                     return;
                }
                this.proNo = data.attributes.projectNo
                this.getSection({projectNo:data.attributes.projectNo});
            },
            addClick:function(data) {
                if (this.proNo ==''){
                    this.$message({
                        type: 'warning',
                        message: '请先点击左边树中项目'
                    })
                    return;
                }
                this.editMod = false
                this.editFormVisible = true
            },
            handleClick(data){
                this.editMod = true
                this.editFormVisible = true
                this.form = data
            },
            searchOption(){
                if (this.proNo=='') {
                    this.$message({
                        type: 'warning',
                        message: '请先点击左边树中项目'
                    })
                    return;
                }
                this.getSection({section_name:this.sectionName,projectNo: this.proNo})
            },
            delClick(data) {
                this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                    HttpUtil.get('section/Delete',{section_id:data.section_id}).success((res)=>{
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.getSection();
                    })

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            submitClick(formName){
                this.$refs[formName].validate((valid) =>{
                    if (valid){
                        this.form['projectNo'] = this.proNo;
                        if(!this.editMod){

                            HttpUtil.get('section/Add',this.form).success((res)=>{
                                this.$message({
                                    type:'success',
                                    message:'保存成功'
                                });
                                this.getSection();
                            })
                        }else{
                            HttpUtil.get('section/Update',this.form).success((res)=>{
                                this.$message({
                                    type:'success',
                                    message:'修改成功'
                                });
                                this.getSection();
                            })
                        }

                    }else{
                        this.$message({
                            type:'error',
                            message:'输入内容不能为空'
                        })
                    }
                });
            },
            cancelClick(){
                this.form={};
                this.editFormVisible = false;

            },
            getSection(params){
                if(params==null){
                    var params = {
                        pageno:1,
                        pagesize: 200
                    }
                }else{
                    params['pageno']=1;
                    params['pagesize']=200;
                }

                HttpUtil.get('section/List',params).success((res)=>{
                    for(var ind in res.data){
                        res.data[ind]['reportFlag'] += '';
                        res.data[ind]['air'] += '';
                        res.data[ind]['electric'] += '';
                        res.data[ind]['coal'] += '';
                        res.data[ind]['gas'] += '';
                        res.data[ind]['heat'] += '';
                        res.data[ind]['oil'] += '';
                        res.data[ind]['steam'] += '';
                        res.data[ind]['water'] += '';
                    }

                    this.tabData = res.data;
                })
            }

        },
        created:function(){

        },
        mounted:function(){
            this.tooltip = true;
        }
    });


</script>

</body>
</html>
